<template>
  <view class="model-setting-container">
    <view class="model-setting-item" :class="{sel: title=='长开模式'}">长开模式</view>
    <view class="model-setting-item" :class="{sel: title=='靠近开启模式'}" @click="showNear">靠近开启模式</view>
    <view class="model-setting-item" :class="{sel: title=='不打扰模式'}" @click="showDisturb">不打扰模式</view>
    <view class="model-setting-item" :class="{sel: title=='计时模式'}" @click="showTime">计时模式</view>

    <view v-if="showPopup" >
      <view class="popup-card">
        <view class="popup-close" v-if="title == '靠近开启模式'||title == '不打扰模式'" @click="showPopup = false">×</view>

        <view class="popup-header">
          <view class="popup-title">{{ title }}</view>
        </view>
        <view class="popup-desc">自动检测猫咪喝水离开后开启喷水，请选择喷水时间</view>
        <view class="popup-option" @click="selectOption(item, idx)" v-for="(item, idx) in options" :key="idx">{{item}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: false,
			options: ['45s', '60s', '1m30s', '2m', '3m'],
			title: '长开模式',
			desc: '自动检测猫咪喝水离开后开启喷水，请选择喷水时间',
			
    }
	},
  methods: {
    selectOption() { 
      uni.navigateBack({
         delta: 1
      });
    },
		showNear() { 
			this.showPopup = true
			this.title = '靠近开启模式'
			this.desc = '自动检测猫咪靠近时开始喷水，请选择喷水时间'
			this.options = ['45s', '60s', '1m30s', '2m', '3m']

		},
		showDisturb() { 
			this.showPopup = true
			this.title = '不打扰模式'
			this.desc = '自动检测猫咪喝水离开后开启喷水，请选择喷水时间'
			this.options = ['45s', '60s', '1m30s', '2m', '3m']

		},
		showTime() { 
			this.title = '计时模式'
			this.desc = '请选择开启间隔时间，每次启动后喷水2分钟'
			this.options = ['0.5h', '1h', '2h', '3h', '5h']
			this.showPopup = true
			

		}
	}
}
</script>

<style scoped>
.popup-close {
  position: absolute;
  top: 20rpx;
  right: 40rpx;
  font-size: 44rpx;
  color: #888;
  font-weight: bold;
  cursor: pointer;
}
.model-setting-container {
  min-height: 100vh;
  background: #fff;
  padding: 36rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sel{
  background: #000;
  color: #fff !important;

}
.model-setting-btn {
  width: 95vw;
  max-width: 700rpx;
  height: 100rpx;
  color: #fff;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: 500;
}
.model-setting-item {
  max-width: 700rpx;
  width: 95vw;
  height: 80rpx;
  border-radius: 32rpx;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  color: #111;
  text-align: center;
  margin-bottom: 50rpx;
}

.popup-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.popup-card {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
  margin-top: 40rpx;
  width: 100vw;
  background: #fbfbfb;
  border-radius: 36rpx;
  box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.08);
  padding: 40rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
}
.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #111;
}
.popup-close {
  font-size: 44rpx;
  color: #888;
  font-weight: bold;
  cursor: pointer;
}
.popup-desc {
  color: #888;
  font-size: 26rpx;
  padding: 18rpx 40rpx 0 40rpx;
  margin-bottom: 30rpx;
}
.popup-option {
  font-size: 32rpx;
  color: #111;
  text-align: center;
  padding: 36rpx 0;
  border-top: 1rpx solid #f2f2f2;
}
</style>
